<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
         <acc-set-card></acc-set-card>
        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-folder" @click="saveEdit()">保存</el-button>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="账号代码" prop="bankAccount">
                            <el-input v-model="ruleForm.bankAccount" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="账号名称" prop="description">
                            <el-input v-model="ruleForm.description" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="科目" prop="subCode">
                            <div @click="showTreeDialog2('科目')">
                                <el-input v-model="ruleForm.subCode" readonly>
                                    <i slot="suffix" class="el-icon-search"></i>
                                </el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="币别" prop="curreny">
                            <el-select
                                v-model="ruleForm.curreny"
                                placeholder="请选择"
                                @focus="currRateFindList"
                            >
                                <el-option
                                    v-for="item in currList"
                                    :key="item.value"
                                    :label="item.currCode"
                                    :value="item.currCode"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="银行全称" prop="bankName">
                            <el-input v-model="ruleForm.bankName" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="银行简称" prop="bankNameShort">
                            <el-input v-model="ruleForm.bankNameShort" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="网银" prop="eBank">
                            <el-select v-model="ruleForm.eBank" placeholder="请选择" clearable>
                                <el-option label="未开通" :value="0"></el-option>
                                <el-option label="已开通" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6"></el-col>
                </el-row>
            </el-form>
        </div>

        <tree-search-subject
            :isShow="showSearch2"
            :dialogTitle="searchDialogTit2"
            @edit="searchBack2"
            @close="closeTreeDialog2"
        ></tree-search-subject>
    </div>
</template>


<script>
import appMain from '../../../utils/app_main';
import _ from 'lodash';
import XEUtils from 'xe-utils';

export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            searchDialogTit1: '',
            showSearch1: false,
            searchDialogTit2: '',
            showSearch2: false,
            //会计期间
            periodList: [],
            //币别
            currList: [],
            rules1: {
                description: [
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9\s]+(·[\u4E00-\u9FA5A-Za-z0-9]+)*$/,
                        message: '请输入格式正确的名称',
                        trigger: 'change'
                    },
                    { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'change' }
                ],
                bankName: [
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9\s]+(·[\u4E00-\u9FA5A-Za-z0-9]+)*$/,
                        message: '请输入格式正确的名称',
                        trigger: 'change'
                    },
                    { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'change' }
                ],
                bankNameShort: [
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9\s]+(·[\u4E00-\u9FA5A-Za-z0-9]+)*$/,
                        message: '请输入格式正确的简称',
                        trigger: 'change'
                    },
                    { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'change' }
                ]
            },
            rules: {
                accBankId: [
                    {
                        pattern: /^([1-9]{1})(\d{15}|\d{18})$/,
                        message: '请输入16~19位正确的银行账号',
                        trigger: 'blur'
                    }
                ],
                description: [
                    { require: true, message: '请输入', trigger: 'change' },
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9\s]+(·[\u4E00-\u9FA5A-Za-z0-9]+)*$/,
                        message: '请输入格式正确的名称',
                        trigger: 'change'
                    },
                    { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'change' }
                ],
                bankName: [
                    { require: true, message: '请输入', trigger: 'change' },
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9\s]+(·[\u4E00-\u9FA5A-Za-z0-9]+)*$/,
                        message: '请输入格式正确的名称',
                        trigger: 'change'
                    },
                    { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'change' }
                ],
                bankNameShort: [
                    { require: true, message: '请输入', trigger: 'change' },
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9\s]+(·[\u4E00-\u9FA5A-Za-z0-9]+)*$/,
                        message: '请输入格式正确的简称',
                        trigger: 'change'
                    },
                    { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'change' }
                ],
                subCode: [{ require: true, message: '请选择科目', trigger: 'change' }],
                curreny: [{ require: true, message: '请选择币别', trigger: 'change' }]
            },
            ruleForm: {
                accBankId: '', //账号名称
                bankName: '', //银行全称
                bankNameShort: '', //银行简称
                curreny: '', //币别
                description: '', //账户名称
                eBank: 0, //是否开通网银：0没有开通，1开通
                subCode: '' //科目id
            }, //新增model
            editForm: {},
            isUpdate: false
        };
    },
    created() {
        if (this.$route.query.id) {
            let id = this.$route.query.id;
            //是更新操作
            this.isUpdate = true;
            this.getDataById(id);
        } else {
            //新增操作
            this.isUpdate = false;
        }
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 200;
        this.pageTitle = this.$router.currentRoute.meta.title;
        //$refs.xTree.setAllTreeExpand(true);
    },
    methods: {
        getDataById(id) {
            appMain
                .accBankFindById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.ruleForm = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        addRate() {
            appMain
                .accBankInsert(this.ruleForm)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$message.success(res.data.message);
                        this.$router.push({
                            path: '/bankAccount' //跳转的路径
                        });
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        updateRate() {
            appMain
                .accBankUpdateById(this.ruleForm)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$message.success(res.data.message);
                        this.$router.push({
                            path: '/bankAccount' //跳转的路径
                        });
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        getPeriodList() {
            appMain
                .accPeriodFindDefaultData()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.periodList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        currRateFindList() {
            appMain
                .currRateFindList()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.currList = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submitForm(formName) {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    if (formName == 'ruleForm') {
                        this.addRate();
                    } else if (formName == 'editForm') {
                        this.updateRate();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        saveEdit() {
            if (this.isUpdate == false) {
                this.submitForm('ruleForm');
            } else if (this.isUpdate == true) {
                this.submitForm('editForm');
            }
        },
        // 选择
        showTreeDialog2(tit) {
            console.log('showTreeDialog');
            this.searchDialogTi2t = tit;
            this.showSearch2 = true;
        },
        // 树组件搜索结果返回
        searchBack2(data) {
            console.log(data.backData, 'searchTreeBack');
            this.ruleForm.subId = data.backData.id;
            this.ruleForm.subCode = data.backData.subCode;
            this.ruleForm.subName = data.backData.subName;
            this.showSearch2 = false;
        },
        closeTreeDialog2(data) {
            this.showSearch2 = data.showDialog;
        }
    },
    computed: {},
    watch: {}
};
</script>

<style lang="css" scoped>
.el-card {
    height: 100%;
}

.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}

.el-input {
    max-width: 215px;
}
</style>